<template>
	<view class="container">
		<view class="content-wrapper">
			<view class="card mb-20">
				<image src="/static/food1.jpg" mode="widthFix" style="width: 100%; border-radius: 10rpx;"></image>
				
				<view class="mt-20">
					<text class="block" style="font-weight: bold; font-size: 36rpx;">全聚德烤鸭店</text>
					
					<view class="flex align-center mt-10">
						<text class="text-red">4.5分</text>
						<text class="text-gray ml-10">1280条评论</text>
					</view>
					<text class="block text-gray mt-10">北京市东城区前门大街30号</text>
					
					<view class="flex mt-20">
						<text class="tag mr-10">美食</text>
						<text class="tag mr-10">烤鸭</text>
						<text class="tag">老字号</text>
					</view>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">店铺信息</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">营业时间</text>
					<text>11:00-21:30</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">人均消费</text>
					<text>¥128/人</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">联系电话</text>
					<text>010-12345678</text>
				</view>
				
				<view class="info-item flex justify-between">
					<text class="text-gray">特色菜品</text>
					<text>烤鸭、鸭汤、鸭肝</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">店铺介绍</text>
				</view>
				
				<text class="block text-gray">
					全聚德是中华老字号，始建于1864年，以烤鸭闻名中外。全聚德采用挂炉烤鸭技术，"全而无缺、聚而不散、仁德为美"是其品牌内涵。
					前门店是全聚德的起源店，位于前门大街，地理位置优越，是品尝正宗北京烤鸭的首选之地。
				</text>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">用户评价</text>
				</view>
				
				<view class="comment-list">
					<view class="comment-item mb-20">
						<view class="flex align-center">
							<image src="/static/avatar.jpg" mode="aspectFill" style="width: 60rpx; height: 60rpx; border-radius: 50%; margin-right: 20rpx;"></image>
							<view>
								<text class="block">游客123</text>
								<text class="text-gray">2023-06-10</text>
							</view>
						</view>
						<text class="block mt-10">烤鸭味道正宗，皮脆肉嫩，服务也很周到，就是价格稍微有点贵，但总体来说还是很值得的。</text>
					</view>
					
					<view class="comment-item">
						<view class="flex align-center">
							<image src="/static/avatar.jpg" mode="aspectFill" style="width: 60rpx; height: 60rpx; border-radius: 50%; margin-right: 20rpx;"></image>
							<view>
								<text class="block">美食家</text>
								<text class="text-gray">2023-06-05</text>
							</view>
						</view>
						<text class="block mt-10">百年老店，环境优雅，烤鸭技艺精湛，每一口都是享受。推荐给所有来北京的朋友。</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom flex">
			<view class="flex align-center" style="flex: 1; padding: 0 20rpx;">
				<text class="iconfont icon-collect" style="font-size: 40rpx; margin-right: 10rpx;"></text>
				<text>收藏</text>
			</view>
			<view class="button" style="flex: 2;" @click="callPhone">电话预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '010-12345678'
				})
			}
		}
	}
</script>

<style>
	.tag {
		background: #f5f5f5;
		color: #666;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	.info-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.comment-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.comment-item:last-child {
		border-bottom: none;
	}
	
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.content-wrapper {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 140rpx;
	}
</style>